<template>
  <!-- 评论 -->
  <div id="comment">
    <div class="addBox">
      <el-input
        type="textarea"
        placeholder="请输入评论内容"
        rows="4"
        v-model="commentContent"
      ></el-input>
      <div class="button">
        <el-button @click="commentContent = ''">取消</el-button>
        <el-button type="primary" @click="add" :loading="addLoading"
          >确定</el-button
        >
      </div>
    </div>
    <div class="list">
      <div class="item" v-for="item in commentList" :key="item.id">
        <div class="userInfo">
          <el-avatar :size="40" :src="item.avatar" />
          <div class="info">
            <p class="name">{{ item.username }}</p>
            <p class="time">{{ item.createTime }}</p>
          </div>
        </div>
        <div class="contentBox">
          <p class="content">
            {{ item.replyText }}
          </p>

          <div class="buttonList">
            <!-- <p class="reply" @click="reply(index)">回复</p> -->
            <el-icon
              size="16"
              color="#999"
              class="icon"
              @click="item.isReply = true"
            >
              <el-icon-chat-dot-round />
            </el-icon>
            <el-popconfirm
              title="确定删除该条评论吗？"
              @confirm="deleteComment(item.id)"
            >
              <template #reference>
                <!-- <p class="delete" v-if="item.adminId == userInfo.userId">
                  删除
                </p> -->
                <el-icon
                  size="16"
                  color="#999"
                  class="icon"
                  v-if="item.adminId == userInfo.userId"
                >
                  <el-icon-delete />
                </el-icon>
              </template>
            </el-popconfirm>
          </div>
          <div
            class="replyContent"
            v-show="item.isReply"
            style="margin-left: 0"
          >
            <el-input
              class="reply"
              type="textarea"
              placeholder="请输入回复内容"
              rows="3"
              v-model="replyContent"
            ></el-input>
            <div class="button">
              <el-button @click="cancel">取消</el-button>
              <el-button
                type="primary"
                @click="addReply(item.id)"
                :loading="addLoading"
                >确定</el-button
              >
            </div>
          </div>
          <div
            class="replyBox"
            v-for="c_item in item.subComments"
            :key="c_item.id"
          >
            <div class="userInfo">
              <el-avatar :size="40" :src="c_item.avatar" />
              <div class="info">
                <p class="name">{{ c_item.username }}</p>
                <p class="time">{{ c_item.createTime }}</p>
              </div>
            </div>
            <div class="content">
              <p>回复</p>
              <p class="replyUser">{{ c_item.replyUsername }}：</p>
              {{ c_item.replyText }}
            </div>

            <div class="buttonList">
              <el-icon
                size="16"
                color="#999"
                class="icon"
                @click="c_item.isSubReply = true"
              >
                <el-icon-chat-dot-round />
              </el-icon>
              <el-popconfirm
                title="确定删除该条评论吗？"
                @confirm="deleteComment(c_item.id)"
              >
                <template #reference>
                  <el-icon
                    size="16"
                    color="#999"
                    class="icon"
                    v-if="c_item.adminId == userInfo.userId"
                  >
                    <el-icon-delete />
                  </el-icon>
                </template>
              </el-popconfirm>
            </div>
            <div class="replyContent" v-show="c_item.isSubReply">
              <el-input
                class="reply"
                type="textarea"
                placeholder="请输入回复内容"
                rows="3"
                v-model="replyContent"
              ></el-input>
              <div class="button">
                <el-button @click="cancel">取消</el-button>
                <el-button
                  type="primary"
                  @click="addReply(c_item.id)"
                  :loading="addLoading"
                  >确定</el-button
                >
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: '',
  data () {
    return {
      userInfo: '',
      commentContent: '',//评论内容
      replyContent: '',//回复内容
      commentList: [],
      currentIndex: null,
      isReply: false,
      addLoading: false
    }

  },
  props: {
    type: {//流程类型
      type: Number,
      required: true,
    }
  },
  mounted () {
    this.userInfo = this.$TOOL.data.get('USER_INFO')
    this.getCommentList()
  },
  methods: {
    // 获取评论列表
    async getCommentList () {
      // streamType 类型 
      let res = await this.$API.contract.comment.getCommentsById.get({ correlationId: this.$route.query.id, streamType: this.type })
      console.log(res)
      this.commentList = res.data
    },
    // 添加评论
    async add () {
      this.addLoading = true
      let data = {
        correlationId: this.$route.query.id,
        streamType: this.type,
        replyText: this.commentContent
      }
      let res = await this.$API.contract.comment.addComment.post(data)
      if (res.code == 200) {
        this.commentContent = ''
        this.addLoading = false
        this.getCommentList()
        this.$message.success("评论成功")
      }
    },
    // 回复评论
    async addReply (id) {
      this.addLoading = true
      let data = { replyId: id, replyText: this.replyContent, streamType: this.type, }
      let res = await this.$API.contract.comment.replyComment.post(data)
      if (res.code == 200) {
        this.replyContent = ''
        this.addLoading = false
        this.getCommentList()
        this.$message.success("回复成功")
      }
    },
    // 删除评论
    async deleteComment (id) {
      let res = await this.$API.contract.comment.deleteComment.post({ id, streamType: this.type, })
      if (res.code == 200) {
        this.getCommentList()
        this.$message.success("删除成功")
      }
    },
    cancel () {
      this.isReply = false
      this.replyContent = ''
    }
  }
}
</script>
<style lang='scss' scoped>
#comment {
  .button {
    text-align: right;
    margin-top: 10px;
  }

  .list {
    margin-top: 20px;
    .item {
      margin-top: 30px;
    }
    .userInfo {
      display: flex;
      align-items: center;
    }
    .info {
      display: flex;
      align-items: center;
      margin-left: 10px;
      .name {
        font-size: 14px;
        font-weight: 600;
      }
      .time {
        margin-left: 10px;
        color: #999;
      }
    }
    .contentBox {
      margin-top: 5px;
      margin-left: 50px;
      .content {
        margin-bottom: 5px;
      }
      .buttonList {
        display: flex;
        align-items: center;
      }
      .icon {
        cursor: pointer;
        margin-right: 10px;
      }
      .reply {
        color: #666;
        cursor: pointer;
      }
      .delete {
        display: inline;
        margin-left: 10px;
        color: #999;
        cursor: pointer;
        // &:hover {
        //   color: #3d7eff;
        //   cursor: pointer;
        // }
      }
      .replyBox {
        margin-top: 15px;
        .content {
          display: flex;
          align-items: center;
          margin-left: 50px;
        }
        .buttonList {
          margin-left: 50px;
        }
        .replyUser {
          color: #999;
        }
      }
      .replyContent {
        width: 50%;
        margin-top: 10px;
        margin-left: 50px;
      }
    }
  }
}
</style>